<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <back-button></back-button>
      <p>新增送货地址</p>
    </header>
    <!-- 表单部分 -->
    <ul class="form-box">
      <li>
        <div class="title">联系人：</div>
        <div class="content">
          <input type="text" v-model="deliveryAddress.contactName" placeholder="联系人姓名">
        </div>
      </li>
      <li>
        <div class="title">性别：</div>
        <div class="content" style="font-size: 3vw;">
          <input type="radio" v-model="deliveryAddress.contactSex" value="1" style="width:6vw;height:3.2vw;">男
          <input type="radio" v-model="deliveryAddress.contactSex" value="0" style="width:6vw;height:3.2vw;">女
        </div>
      </li>
      <li>
        <div class="title">电话：</div>
        <div class="content">
          <input type="tel" v-model="deliveryAddress.contactTel" placeholder="电话">
        </div>
      </li>
      <li>
        <div class="title">收货地址：</div>
        <div class="content">
          <input type="text" v-model="deliveryAddress.address" placeholder="收货地址">
        </div>
      </li>
    </ul>
    <div class="button-add">
      <button @click="addUserAddress">保存</button>
    </div>
    <!-- 底部菜单部分 -->
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from '../components/Footer.vue';
import axios from 'axios'; // 导入 axios
import backButton from "../components/backButton.vue";
import qs from 'qs'; // 导入 qs，用于序列化请求参数
import {
  getCurDate,
  setSessionStorage,
  getSessionStorage,
  removeSessionStorage,
  setLocalStorage,
  getLocalStorage,
  removeLocalStorage
} from '../common.js';
import BackButton from "@/components/backButton.vue";

export default {
  name: 'AddUserAddress',
  data() {
    return {
      businessId: this.$route.query.businessId,
      user: {},
      deliveryAddress: {
        contactName: '',
        contactSex: 1,
        contactTel: '',
        address: ''
      }
    }
  },
  created() {
    this.user = this.$getSessionStorage('user');
  },
  components: {
    BackButton,
    Footer
  },
  methods: {
    addUserAddress() {
      if (this.deliveryAddress.contactName === '') {
        alert('联系人姓名不能为空！');
        return;
      }

      if (this.deliveryAddress.contactTel === '') {
        alert('联系人电话不能为空！');
        return;
      }

      // 验证手机号格式：11位数字，第二位不为2
      const phoneRegex = /^[0-9]{11}$/;
      if (!phoneRegex.test(this.deliveryAddress.contactTel) || this.deliveryAddress.contactTel[1] === '2') {
        alert('请输入正确的电话号');
        return;
      }

      if (this.deliveryAddress.address === '') {
        alert('联系人地址不能为空！');
        return;
      }

      this.deliveryAddress.userId = this.user.userId;
      this.$axios.post('/deliveryAddresses', this.deliveryAddress)
          .then(response => {
            if (response.data.state > 0) {
              this.$router.back({
                query: {
                  businessId: this.businessId
                }
              });
            } else {
              alert('新增地址失败！');
            }
          })
          .catch(error => {
            console.error(error);
          });
    }
  }
}
</script>
<style scoped>
/*************** 总容器 ***************/
.wrapper {
	width: 100%;
	height: 100%;
}

/*************** header ***************/
.wrapper header {
	width: 100%;
	height: 12vw;
	background-color: #0097FF;
	display: flex;
	justify-content: space-around;
	align-items: center;
	color: #fff;
	font-size: 4.8vw;
	position: fixed;
	left: 0;
	top: 0;
	/*保证在最上层*/
	z-index: 1000;
}

/*************** （表单信息） ***************/
.wrapper .form-box {
	width: 100%;
	margin-top: 12vw;
}

.wrapper .form-box li {
	box-sizing: border-box;
	padding: 4vw 3vw 0vw 3vw;
	display: flex;
}

.wrapper .form-box li .title {
	flex: 0 0 18vw;
	font-size: 3vw;
	font-weight: 700;
	color: #666;
}

.wrapper .form-box li .content {
	flex: 1;
	display: flex;
	align-items: center;
}

.wrapper .form-box li .content input {
	border: none;
	outline: none;
	width: 100%;
	height: 4vw;
	font-size: 3vw;
}

.wrapper .button-add {
	box-sizing: border-box;
	padding: 4vw 3vw 0vw 3vw;
}

.wrapper .button-add button {
	width: 100%;
	height: 10vw;
	font-size: 3.8vw;
	font-weight: 700;
	border: none;
	outline: none;
	border-radius: 4px;
	color: #fff;
	background-color: #38CA73;
}
</style>